<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li {
				width: 100px;
				height: 30px;
				border: 1px #000000 solid;
				margin: 20px;
				list-style: none;
			}
			
			#div1 {
				width: 100px;
				height: 100px;
				background: red;
				margin: 300px;
			}
		</style>
	</head>

	<body>
		<!-- 拖拽”梦龙小站”到”梦龙”地方的小例子 -->
		<ul>
			<li draggable="true">梦龙小站</li>
			<li draggable="true">梦龙小站</li>
			<li draggable="true">梦龙小站</li>
		</ul>
		<div id="div1">梦龙</div>

		<script type="text/javascript">
			window.onload = function() {
				var aLi = document.getElementsByTagName('li');
				var oDiv = document.getElementById('div1');
				var iNow = 0;

				for(var i = 0; i < aLi.length; i++) {
					aLi[i].ondragstart = function() { //拖拽前触发

						this.style.background = 'yellow';

					};

					aLi[i].ondragend = function() { //拖拽结束触发

						this.style.background = '';

					};

					aLi[i].ondrag = function(){ //开始与结束之间，连续触发
						
						document.title = iNow++;
						
					};
				}

				oDiv.ondragenter = function() { //相当于onmouseover

					this.style.background = 'green';

					ev.preventDefault(); //阻止默认事件：元素就可以释放了

				};

				oDiv.ondragleave = function() { //相当于onmouseout

					this.style.background = 'red';

				};

				oDiv.ondragover = function(ev) { //进入目标、离开目标之间，连续触发

					ev.preventDefault(); //阻止默认事件：元素就可以释放了

					document.title = iNow++;

				};

				oDiv.ondrop = function(ev) { //释放鼠标的时候触发

					this.style.background = 'red';

					alert("梦龙小站，鼠标已经释放");

					ev.preventDefault(); //阻止默认事件：防止打开拖拽元素的url

				};

			};
		</script>
	</body>

</html>